const List = props => {
    // console.log(props)

    //解构从父组件传递下来的数据
    let { todos, onDel, onChecked } = props;

    //封装一个方法,专门用于通过数据,创建li解构

    let renderContent = (data = []) => {
        return data.map(item => {
            return (
                <li key={item.id} className={item.isComplete ? 'isChecked' : ''}>
                    <input checked={item.isComplete}
                        onChange={(e) => {
                            // console.log(e.target.checked)
                            onChecked(item.id, e.target.checked)
                        }}
                        type="checkbox" />
                    <b>{item.todo}</b>
                    -----
                    <button onClick={() => {
                        onDel(item.id)
                    }}>删除</button>
                </li>
            )
        })
    }

    return (

        <ul style={{ listStyle: 'none' }}>
            {renderContent(todos)}
        </ul>
    )
}

export default List